<template>
  <div class="home">
    <!-- 顶部图片 -->
    <div class="top_img">
      <img src="@/assets/img/banner.png"
           alt="">
    </div>
    <!-- 开始评估 -->
    <div class="yes_box">
      <!-- 开始 -->
      <div class="start"
           @click="startAssess">
        <img src="@/assets/img/icon_shou.png"
             alt="">
        开始恶心呕吐风险个体评估
      </div>
      <!-- 消息 -->
      <div class="new">
        <van-row>
          <van-col span="4"
                   class="new_t">最近动态</van-col>
          <van-col span="20"
                   class="new_c"
                   v-if="report === -1">您今天需要报告恶心呕吐事件</van-col>
          <van-col span="20"
                   class="new_c"
                   v-else>暂无</van-col>
        </van-row>
      </div>
      <!-- 报告事件 -->
      <div class="start"
           @click="vomitShow = true"
           style="margin-top:16px;background: linear-gradient(180deg, #D87BFF 0%, #5334D5 100%);">
        <img src="@/assets/img/icon_shou.png"
             alt="">
        报告恶心呕吐事件
      </div>
      <div class="title">
        <span class="i"></span>
        <span>CINV风险评估</span>
      </div>
      <!-- 评估 -->
      <AssessModule :cinvInfo="cinvInfo"></AssessModule>

      <div class="title"
           v-if="cinvInfo && prescriptionList.length !== 0">
        <span class="i"></span>
        <span>CINV用药处方</span>
      </div>
      <!-- 用药处方 -->
      <div class="prescription"
           v-if="cinvInfo && prescriptionList.length !== 0">
        <PrescriptionCard :prescriptionList="prescriptionList"></PrescriptionCard>
      </div>
      <div class="title">
        <span class="i"></span>
        <span>既往治疗周期</span>
      </div>
      <!-- 既往治疗周期 -->
      <van-list v-model="loading"
                :finished="finished"
                finished-text="END"
                @load="getcycle">
        <div class="cycle">
          <div class="items"
               :class="{ 'active_item': i.color === 'green'}"
               @click="cycleDetail(i)"
               v-for="(i,ins) in cycleList"
               :key="ins">
            <span>{{i.createtime}}</span>
            <span :style="{ 'color': i.color === 'red' ? '#FD436C' : ''}">{{i.situation || '暂无'}}</span>
          </div>
        </div>
      </van-list>

    </div>
    <!-- 报告恶心事件表单弹出层 -->
    <van-popup v-model="vomitShow">
      <h1>化疗后恶心呕吐情况调查表</h1>
      <p class="explain">恶心呕吐情况收集说明：请您每天记录 恶心呕吐情况。您填写的准确性及频繁性将影响您的下次治疗，请务必如实填写，非常感谢！</p>
      <div class="detail">
        <div class="time">{{today}}</div>
        <div class="ask">1.您今天是否有呕吐的发生？</div>
        <div class="answer">
          <!-- 单选模块 -->
          <van-radio-group v-model="vomitParams.vomit"
                           direction="horizontal">
            <van-radio name="1">是</van-radio>
            <van-radio name="2">否</van-radio>
          </van-radio-group>
        </div>
        <div class="ask">2.您今天出现几次呕吐？（间隔至少5分钟）</div>
        <div class="answer">
          <van-field readonly
                     clickable
                     @focus="fieldSelect"
                     name="picker"
                     v-model="vomitParams.vomit_number"
                     placeholder="请选择"
                     @click="vomitNumShow = true" />
        </div>
        <div class="ask">3.您是否有恶心的感觉(含食欲不佳）</div>
        <div class="answer">
          <!-- 单选模块 -->
          <van-radio-group v-model="vomitParams.nausea"
                           direction="horizontal">
            <van-radio name="1">是</van-radio>
            <van-radio name="2">否</van-radio>
          </van-radio-group>
        </div>
        <div class="ask">4.如果您有恶心的情况，恶心严重程度是多少？ (0-10数字，越大程度越高)</div>
        <div class="answer">
          <van-field readonly
                     clickable
                     @focus="fieldSelect"
                     name="picker"
                     v-model="vomitParams.nausea_degree"
                     placeholder="请选择"
                     @click="nauseaNumShow = true" />
        </div>
        <div class="ask">5.您今天是否正常排便？若有请填写几次</div>
        <div class="answer">
          <div class="flex">
            <div class="box1">
              <!-- 单选模块 -->
              <van-radio-group v-model="vomitParams.defecation"
                               direction="horizontal">
                <van-radio name="1">是</van-radio>
                <van-radio name="2">否</van-radio>
              </van-radio-group>
            </div>
            <div class="box2">
              <van-stepper min="0"
                           :disabled="vomitParams.defecation !== '1'"
                           integer
                           button-size="24"
                           v-model="vomitParams.defecation_number" />
            </div>
          </div>
        </div>
        <div class="ask">6.您今天是否发生腹泻？(至少间隔5分钟),若有请 填写几次</div>
        <div class="answer">
          <div class="flex">
            <div class="box1">
              <!-- 单选模块 -->
              <van-radio-group v-model="vomitParams.diarrhea"
                               direction="horizontal">
                <van-radio name="1">是</van-radio>
                <van-radio name="2">否</van-radio>
              </van-radio-group>
            </div>
            <div class="box2">
              <van-stepper min="0"
                           :disabled="vomitParams.diarrhea !== '1'"
                           integer
                           button-size="24"
                           v-model="vomitParams.diarrhea_number" />
            </div>
          </div>
        </div>
      </div>
      <button class="x"
              @click="submitVomit">提交</button>
    </van-popup>

    <!-- 底部弹出层-呕吐次数 -->
    <van-popup v-model="vomitNumShow"
               round
               position="bottom">
      <van-picker title="呕吐次数"
                  show-toolbar
                  :columns="vomitNumList"
                  value-key="name"
                  @confirm="vomitNumConfirm"
                  @cancel="vomitNumShow = false" />
    </van-popup>
    <!-- 底部弹出层-恶心程度 -->
    <van-popup v-model="nauseaNumShow"
               round
               position="bottom">
      <van-picker title="恶心程度"
                  show-toolbar
                  :columns="nauseaNumList"
                  value-key="name"
                  @confirm="nauseaNumConfirm"
                  @cancel="nauseaNumShow = false" />
    </van-popup>
  </div>
</template>
<script>
import AssessModule from '@/views/components/AssessModule'
import PrescriptionCard from '@/views/components/PrescriptionCard'
import { treatmentCycle, homeCinv, clues, reportNausea, startAssess } from '@/api/user'
import dayjs from 'dayjs'
export default {
  components: { PrescriptionCard, AssessModule },
  data () {
    return {
      today: dayjs().format('YYYY/MM/DD HH:mm'),
      report: '-1', // 是否展示提示语
      parameter: {
        page_index: 0,
        page_size: 20
      },
      loading: false,
      finished: false,
      cycleList: [], // 既往治疗周期

      cinvInfo: null, // CINV风险评估模块数据
      prescriptionList: [], // CINV风险评估模块药方数据
      vomitShow: false, // 报告恶心呕吐弹出层
      vomitParams: {
        vomit: '', // 是否呕吐   是=1，否=-1
        vomit_number: '', // 呕吐次数  0=0次，1=1-2次，2=3-5次
        nausea: '', // 是否恶心
        nausea_degree: '', // 恶心程度  0-10
        defecation: '', // 是否排便
        defecation_number: '', // 排便次数
        diarrhea: '', // 是否腹泻
        diarrhea_number: '' // 腹泻次数
      },
      vomitNumShow: false, // 填写呕吐次数的picker
      vomitNumList: ['0', '1-2', '3-5', '6以上'],
      nauseaNumShow: false, // 恶心程度
      nauseaNumList: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
    }
  },
  mounted () {
    // 获取cinv风险评估
    this.homeCinv()
    this.clues()
  },
  methods: {
    fieldSelect () {
      document.activeElement.blur()
    },
    async startAssess () {
      const { code, msg, data } = await startAssess()
      if (code !== 1) return this.$toast.fail(msg)
      if (data.isstart !== 1) return this.$toast.fail('目前不可进行恶心呕吐风险个体评估')
      this.$router.push('/home/open_pg')
    },
    // 提交报告恶心呕吐事件
    async submitVomit () {
      if (!this.vomitParams.vomit) return this.$toast.fail('表单必须填写完整')
      if (!this.vomitParams.nausea) return this.$toast.fail('表单必须填写完整')
      if (!this.vomitParams.defecation) return this.$toast.fail('表单必须填写完整')
      if (!this.vomitParams.diarrhea) return this.$toast.fail('表单必须填写完整')
      const _p = { ...this.vomitParams } // 拷贝
      const _w = ['vomit', 'nausea', 'defecation', 'diarrhea'] // 单选里需要处理的字段
      for (const key in _p) {
        if (!_w.includes(key)) continue
        if (_p[key] === '2') _p[key] = '-1'
      }
      // 处理数据 呕吐次数  0=0次，1=1-2次，2=3-5次
      if (_p.vomit_number === '1-2') _p.vomit_number = '1'
      if (_p.vomit_number === '3-5') _p.vomit_number = '2'
      if (_p.vomit_number === '6以上') _p.vomit_number = '2'
      // console.log(_p, this.vomitParams)
      const { msg, code } = await reportNausea(_p)
      if (code !== 1) return this.$toast.fail(msg)
      this.$toast.success('报告恶心呕吐成功')
      this.vomitShow = false
    },
    // 是否展示通知
    async clues () {
      const { data, msg, code } = await clues()
      if (code !== 1) return this.$toast.fail(msg)
      this.report = data.report
    },
    // 首页cinv风险评估
    async homeCinv () {
      const { data, msg, code } = await homeCinv()
      if (code !== 1) return this.$toast.fail(msg)
      this.cinvInfo = data
      this.prescriptionList = JSON.parse(data.cinv_prescription)
    },
    // 既往治疗周期
    async getcycle () {
      this.parameter.page_index += 1
      const { data, code, msg } = await treatmentCycle(this.parameter)
      this.loading = false
      if (code !== 1) {
        this.finished = true
        return this.$toast.fail(msg)
      }
      if (this.parameter.page_index === 1) this.cycleList = []
      this.cycleList.push(...data.data)
      if (this.cycleList.length >= data.total) {
        this.finished = true
      }
    },
    // 选择呕吐次数弹出层确认事件
    vomitNumConfirm (e) {
      this.vomitParams.vomit_number = e
      this.vomitNumShow = false
    },
    // 恶心程度confirm
    nauseaNumConfirm (e) {
      this.vomitParams.nausea_degree = e
      this.nauseaNumShow = false
    },
    // 既往治疗周期详情
    cycleDetail (item) {
      this.$router.push({
        path: '/user/infoAdmin',
        query: {
          id: item.id
        }
      })
    }
  }
}
</script>
<style scoped lang='less'>
// 标题
.title {
  width: 100%;
  height: 34px;
  margin: 8px auto;
  .i {
    display: inline-block;
    margin-right: 5px;
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, #3eb3ff 0%, #436eff 100%);
    opacity: 1;
  }
  span {
    display: inline-block;
    height: 22px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    color: #161616;
    opacity: 1;
  }
}
.home {
  width: 100%;
  padding: 8px 16px;
  box-sizing: border-box;
  padding-bottom: 60px;
  background-color: #f7f8fa;
  .top_img {
    width: 100%;
    height: 152px;
    background: linear-gradient(90deg, #3eb3ff 0%, #436eff 100%);
    box-shadow: 0px 4px 20px rgba(95, 149, 235, 0.44);
    border-radius: 8px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  // 开始评估
  .yes_box {
    width: 100%;
    margin-top: 16px;
    // 开始
    .start {
      // width: 343px;
      height: 44px;
      background: linear-gradient(180deg, #3dcb8d 0%, #09b996 100%);
      border-radius: 8px;
      text-align: center;
      line-height: 46px;
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #ffffff;
      img {
        width: 13px;
        height: 15px;
        margin-right: 3px;
        vertical-align: middle;
      }
    }
    // 消息
    .new {
      width: 100%;
      height: 24px;
      background: #ecf1f9;
      margin-top: 16px;
      border-radius: 8px 2px 2px 8px;
      .new_t {
        background: url("../../assets/img/new_bg.png") no-repeat left;
        font-size: 11px;
        text-align: center;
        color: #ffffff;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 22px;
      }
      .new_c {
        padding-left: 10px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 22px;
        color: #333333;
        opacity: 1;
      }
    }

    // 用药处方
    .prescription {
      width: 100%;
      // height: 100px;
    }
    // 周期
    .cycle {
      width: 100%;
      margin-bottom: 10px;
      .items {
        width: 100%;
        height: 54px;
        margin: 10px auto;
        border-radius: 8px;
        background: url("../../assets/img/zq_bj1.png") no-repeat;
        background-size: 100%;
      }
      .active_item {
        background: url("../../assets/img/zq_bj2.png") no-repeat;
        background-size: 100%;
      }
      span {
        display: inline-block;
        width: 50%;
        height: 54px;
        line-height: 54px;
        text-align: center;
        font-size: 15px;
        color: #ffffff;
        font-weight: 600;
      }
    }
  }
}
.vomit-van-popup-picker {
  width: 100%;
}
/deep/ .van-popup.van-popup--bottom {
  width: 100%;
}
/deep/.van-popup {
  width: 85%;
  padding: 20px 18px;
  box-sizing: border-box;
  border-radius: 8px;
  h1 {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    color: #161616;
    text-align: center;
  }
  .explain {
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 15px;
    color: #ed4c4d;
    margin: 10px auto;
    letter-spacing: 1px;
  }
  .detail {
    width: 100%;
    border-top: 1px solid rgba(112, 112, 112, 0.1843137254901961);
    .time {
      font-size: 14px;
      margin-top: 6px;
      font-family: PingFang SC;
      font-weight: 600;
      line-height: 20px;
      color: #161616;
      opacity: 0.5;
    }
    .ask {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 22px;
      color: #161616;
      margin: 4px auto;
    }
    .answer {
      // background-color: red;
      margin: 4px auto;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 22px;
      color: #4182ff;
      padding: 0px 10px;
      .van-cell {
        height: 25px;
        display: flex;
        align-items: center;
        border: 1px solid;
      }
      .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  .x {
    display: block;
    width: 80%;
    height: 48px;
    background: linear-gradient(90deg, #3eb3ff 0%, #436eff 100%);
    box-shadow: 0px 8px 20px rgba(29, 90, 255, 0.32);
    border-radius: 45px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    margin: 18px auto;
    border: none;
    line-height: 22px;
    color: #ffffff;
  }
}
</style>
